import { useState } from 'react';
import './index.scss';

const SwitchTabs: React.FC<any> = ({ data, onTabChange }) => {
  const [selecctedTab, setSelectedTab] = useState(0);
  const [left, setLeft] = useState(0);

  const activeTab = (tab: any, index: number) => {
    setLeft(index * 100);
    setTimeout(() => {
      setSelectedTab(index);
    }, 300);
    onTabChange(tab, index);
  };

  return (
    <div className="switching-tabs">
      <div className="tab-items">
        {data.map((tab: any, index: number) => {
          return (
            <span
              key={index}
              className={`tab-item ${selecctedTab === index ? 'active' : ''}`}
              onClick={() => activeTab(tab, index)}
            >
              {tab}
            </span>
          );
        })}
        <span className="moving-bg" style={{ left }}></span>
      </div>
    </div>
  );
};

export default SwitchTabs;
